<template>
   <el-card  shadow="hover">
      <template #header>
            <!-- 1.菜单 -->
             <el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect">
               <el-menu-item index="sales">销售量</el-menu-item>
               <el-menu-item index="visits">访问量</el-menu-item>
            </el-menu>
            <div class="right">
            <!-- 2.按钮组-->
              <el-radio-group v-model="radio">
                  <el-radio-button label="今日" value="today"></el-radio-button>
                  <el-radio-button label="本周" value="week"></el-radio-button>
                  <el-radio-button label="本月" value="month"></el-radio-button>
                  <el-radio-button label="今年" value="year"></el-radio-button>
              </el-radio-group>
             <!-- 3.日期选择 -->
              <el-date-picker
              v-model="datarange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts">
            </el-date-picker>
            </div>
      </template>
      <template #default>
        <div class="container">
          <div class="left-chart">
             <v-chart :option="option"></v-chart>
          </div>
          <div class="right-list">
            <div class="title">排行榜</div>
            <div class="list-item" v-for="item in rankLists">
              <span
                :class="{
                  highlight: item.no <= 3,
                }"
              >
              {{ item.no }}
              </span>
              <span>{{ item.title }}</span>
              <span>{{ item.sales }}</span>
            </div>
          </div>
        </div>
      </template>
   </el-card>
</template>

<script setup>
import { ref,onMounted} from 'vue'
import { getSalesData } from '../api/index.js'

const activeIndex = ref('sales')
const radio = ref('today')
const datarange = ref(['',''])
const option = ref({})

const salesData = ref('')
const rankLists = ref('')

const shortcuts = [ 
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

function renderChart(v1,v2){ 
  option.value = {
    title:{
      text: '年度销售额',
      textStyle:{
        fontSize:14,
      },
      left: 'left'
    },
    xAxis: {
      type: 'category',
      data: v2,
      axisTick: {
        show:true,
        alignWithLabel: true,
      },
    },
    grid:{
      left:40
    },
    yAxis: {
      type: 'value',
      // y轴的刻度线设置为虚线
      splitLine: {
        lineStyle: {
          type: 'dotted',
        },
      },
    },
    series: [
      {
        type: 'bar',
        data:v1,
        barWidth: '40%',
        itemStyle: {
          color: 'lightblue',
        },
      }
    ]
  }

}

function handleSelect(index){
  const {saleFulleYear,saleFulleYearAxis,saleRank,visitFullYear,visitFullYeadAxis,visitRank} = salesData.value
  if(index==='sales'){
    renderChart(saleFulleYear,saleFulleYearAxis) 
    rankLists.value = saleRank
  }else if(index==='visits'){
    renderChart(visitFullYear,visitFullYeadAxis) 
    rankLists.value = visitRank
  }
}

onMounted(async ()=>{
  salesData.value = await getSalesData()
  const {saleFulleYear,saleFulleYearAxis,saleRank} = salesData.value
  //渲染图表
  renderChart(saleFulleYear,saleFulleYearAxis)

  //渲染列表
  rankLists.value = saleRank

})
</script>
<style lang="scss" scoped>
   .el-card{
    position: relative;
    margin-top: 20px ;
    :deep(.el-card__header){
      padding: 0;
      border: none;
      .el-menu{
        padding-left: 50px;
      }
      .right{
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 0;/* 把2.3之间的元素都给隐藏掉，让两个按钮在一行显示 */
      }
      .el-radio-group{
        margin-right: 10px;
      }
    }
    .container{
      display: flex;
      .left-chart{
        flex: 0 0 70%;
        height: 434px;
      }
      .right-list{
        flex: 1;
        .title{
          margin-bottom: 10px;
          font-size: 14px;
          font-weight: 600;
        }
        .list-item{
          margin:20px 0;
          display: flex;
          align-items: center;
          gap: 20px;
        }
        span{
          font-size: 14px;
          color: #464545;
          &:nth-child(1){
            width: 20px;
            height: 20px;
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
          }
          &:nth-child(2){
            flex: 1;
          }
          &.highlight{
            background-color: #09b3f7;
            color:#fff
          }
        }
      }
    }
   }
</style>